<script setup lang="ts" name="Post">
  import {nextTick, reactive, ref} from 'vue'
  import getSearchConfig from './config/searchConfig'
  import getContentConfig from './config/contentConfig.js'
  import getDialogConfig from './config/dialogConfig.js'
  import useDialog from '@/hooks/useDialog'
  import getComputedConfig from '@/hooks/getPageConfig'
  import {systemBaseUrl} from '@/api/config/base.js'
  import to from "@/utils/to";
  import {industryTreeSelect} from "@/api/basicdata/industry";
  import {productTreeSelect} from "@/api/basicdata/product";
  import {addWorkOrderCategory, workOrderCategoryTreeSelect} from "@/api/basicdata/work-order-category";
  import {listUser} from "@/api/system/user";
  import {timeFormat} from '@/utils/hsj/timeFormat'
  import { ElDialog } from 'element-plus';
  import {
    updateWorkOrder,
    delByWorkOrderId
  } from "@/api/workorder/workorder"
  import {
    listLogInfo,
    getLogInfo,
    addLogInfo,
    updateLogInfo,
    logStatus,
    delLogInfo
  } from "@/api/workorder/workorderlog"
  import {
    listProjectInfo,
    getProjectBasicInfo,
    getProjectInfo,
    addProjectInfo,
    updateProjectInfo,
    delProjectInfo
  } from "@/api/workorder/project"
  import {
    knowledgeList,
    getKnowledge,
  } from "@/api/knowledge/knowledge";

  import UserDialog from '../components/UserDialog.vue'
  import ProjectDialog from '../components/ProjectDialog.vue'
  import {MdEditor, MdPreview} from 'md-editor-v3';
  import {ExportPDF} from '@vavt/v3-extension';
  import '@vavt/v3-extension/lib/asset/ExportPDF.css';
  import 'md-editor-v3/lib/style.css';
  import {ElMessage} from "element-plus";
  import axios from "axios";
  import {getToken} from '@/utils/auth';

  const prefix = import.meta.env.VITE_APP_BASE_API

  const {proxy} = getCurrentInstance()
  const {sys_normal_disable, sys_user_sex, support_method, work_order_status, work_order_log_status, environment} = proxy.useDict(
    'sys_normal_disable',
    'sys_user_sex',
    'support_method',
    'work_order_status',
    'work_order_log_status',
    'environment'
  )

  const pageName = 'workOrder'
  const requestBaseUrl = systemBaseUrl
  const showPageSearch = ref(true)
  const pageSearchRef = ref(null)
  const pageContentRef = ref(null)
  const descConfig = ref({})
  const dialogHideItems = ref([])
  const tableHideItems = ref([])
  const searchLoading = ref(false)

  const industryOptions = ref([])
  const typeOptions = ref([])
  const productOptions = ref([])
  const currentWorkOrder = ref(null)
  const showDetail = ref(false)
  /** 查询行业下拉树结构 */
  const getIndustryTree = async () => {
    const [err, res] = await to(industryTreeSelect())
    if (res) {
      industryOptions.value = res.data ?? []
    }
  }
  /** 查询工单类型下拉树结构 */
  const getWorkOrderCategoryTree = async () => {
    const [err, res] = await to(workOrderCategoryTreeSelect())
    if (res) {
      typeOptions.value = res.data ?? []
    }
  }

  /** 查询产品下拉树结构 */
  const getProductTree = async () => {
    const [err, res] = await to(productTreeSelect())
    if (res) {
      productOptions.value = res.data ?? []
    }
  }


  const dictMap = {
    status: sys_normal_disable,
    sex: sys_user_sex,
    orderStatus: work_order_status,
    supportMethod: support_method,
    environment: environment,
    industryId: industryOptions,
    type: typeOptions,
    productId: productOptions,
  }
  const searchConfig = getSearchConfig()
  const searchConfigComputed = computed(() => {
    return getComputedConfig(searchConfig, dictMap)
  })
  const tableSelected = ref([])
  const tableListener = {
    selectionChange: (selected) => {
      tableSelected.value = selected
    },
  }
  const contentConfig = getContentConfig()
  const contentConfigComputed = computed(() => {
    contentConfig.hideItems = tableHideItems
    return contentConfig
  })

  const dialogConfig = getDialogConfig()

  const dialogConfigComputed = computed(() => {
    dialogConfig.hideItems = dialogHideItems
    return getComputedConfig(dialogConfig, dictMap)
  })

  const addCallBack = () => {
    dialogHideItems.value.length = 0
    isSearch.value = false
    values.value = []
  }
  const editCallBack = (item, type, res) => {
    isSearch.value = false
    isEditMore.value = type
    values.value = []
    currentWorkOrder.value = item
    values.value = item.supports
  }
  const isEditMore = ref(false)
  const editMoreClick = () => {
    if (tableSelected.value.length > 0) {
      const data = tableSelected.value[0]
      pageContentRef.value?.editClick(data, true)
      nextTick(() => {
        const newArray = tableSelected.value.slice(1)
        dialogRef.value?.changeSelected(newArray)
      })
    }
  }

  const editNext = (data) => {
    pageContentRef.value?.editClick(data, true)
  }

  const [dialogRef, infoInit, addClick, editBtnClick] = useDialog(
    addCallBack,
    editCallBack,
    '添加'
  )

  const dialogWidth = ref('720px')
  const searchData = computed(() => {
    return pageContentRef.value?.finalSearchData
  })

  const search = () => {
    pageSearchRef.value?.search()
  }

  const beforeSend = (queryInfo) => {
  }

  const permission = {
    add: 'workOrder:info:add',
    edit: 'workOrder:info:edit',
    del: 'workOrder:info:remove',
  }

  const triggerShowSearch = () => {
    showPageSearch.value = !showPageSearch.value
  }

  const onChangeShowColumn = (filterArr) => {
    tableHideItems.value = filterArr
  }

  /** 导出按钮操作 */
  const handleExport = () => {
    proxy.download(
      'system/post/export',
      {
        ...searchData.value,
      },
      `post_${new Date().getTime()}.xlsx`
    )
  }

  const dialogVisible = ref(false)
  const isSearch = ref(false)
  const projectDialogVisible = ref(false)
  const clickSelectUser = (search) => {
    //判断是否从搜索框触发
    isSearch.value = search
    dialogVisible.value = true

  }
  const allocationMarkter = (items) => {
    if (items) {
      dialogVisible.value = false
    }

    //由于一个客户当前只允许属于一个销售，因此只获取第一个。
    let userId = items[0].userId
    let nickName = items[0].nickName
    console.log('allocationMarkter:', items, isSearch)

    //判断是从search搜索，还是dialog搜索
    if (isSearch.value) {
      pageSearchRef.value?.setFormData('marketerId', userId)
      pageSearchRef.value?.setFormData('marketerName', nickName)
    } else {

      dialogRef.value?.setFormData('marketerId', userId)
      dialogRef.value?.setFormData('marketerName', nickName)
    }
  }

  const clickSelectProject = (search) => {//判断是否从搜索框触发
    isSearch.value = search
    projectDialogVisible.value = true
  }
  const allocationProject = (items) => {
    if (items) {
      projectDialogVisible.value = false
    }

    //由于一个客户当前只允许属于一个销售，因此只获取第一个。
    let projectId = items[0].projectId
    let projectName = items[0].name

    console.log('allocationProject:', items, isSearch)
    //判断是从search搜索，还是dialog搜索
    if (isSearch.value) {
      pageSearchRef.value?.setFormData('projectId', projectId)
      pageSearchRef.value?.setFormData('projectName', projectName)
    } else {
      dialogRef.value?.setFormData('projectId', projectId)
      dialogRef.value?.setFormData('projectName', projectName)
    }

  }
  const reset = () => {
    pageSearchRef.value?.setFormData('name', '')
    pageSearchRef.value?.setFormData('orderStatus', '')
    pageSearchRef.value?.setFormData('projectId', '')
    pageSearchRef.value?.setFormData('projectName', '')
    pageSearchRef.value?.setFormData('marketerId', '')
    pageSearchRef.value?.setFormData('marketerName', '')
    search()

  }
  const values = ref([])
  const supports = ref([])

  const selectSupport = (value) => {
    console.log('selectSupport:', value)
    dialogRef.value?.setFormData('supports', value)
  }
  const clearSupport = async () => {
    console.log('clearSupport:', values.value)
    console.log('currentWorkOrder:', currentWorkOrder.value)
    //删除该工单的下的所有支持人员
    let workOrderId = currentWorkOrder.value.workOrderId
    if (workOrderId) {
      const [error, res] = await to(delByWorkOrderId(workOrderId))
      console.log('delByWorkOrderId:', res)
    }
  }

  const searchUser = async () => {
    //暂时查询1000人
    let params = {
      pageSize: 1000,
      pageNum: 1
    }
    const [error, res] = await to(listUser(params))
    if (res) {

      let rows = res.rows
      if (rows) {
        let users = []
        rows.forEach(item => {
          console.log('item:', item)
          let nickName = item.nickName;
          let userId = item.userId;
          let support = {
            label: nickName,
            value: {
              supportPerson: userId,
              supportPersonName: nickName
            }
          }
          users.push(support)
        })
        supports.value = users;
      }
    }
  }


  const init = () => {
    getIndustryTree()
    getWorkOrderCategoryTree()
    getProductTree()
    searchUser()
  }

  init()

  //知识库
  const pageNum = ref(1)
  const pageSize = ref(20)
  const total = ref(0)
  const keywords = ref('');

  const toolbars = [
    // 'save',
    '0',
    '-',
    'pageFullscreen',
    'fullscreen',
    'title',
    'sub',
    'bold',
    'underline',
    'italic',
    'codeRow',
    'code',
    'link',
    'image',
    'table',
    // 'mermaid',
    // 'katex',
    '-',
    'strikeThrough',
    // 'sup',
    'quote',
    'unorderedList',
    'orderedList',
    'task', // ^2.4.0
    '-',
    // 'revoke',
    // 'next',
    // '=',
    'preview',
    'htmlPreview',
    'catalog',
  ];

  const scrollElement = document.documentElement;
  const knowledgePriviewId = ref('knowledgePriviewId');
  const workOrderPriviewId = ref('workOrderPriviewId');
  const knowledgeSelected = ref({
    knowledgeId: null,
    title: '',
    content: '',
    version: null,
    viewNum: null,
  });

  const max = ref(0)
  const value = ref(0)
  const toButtom = ref(410)
  const innerRef = ref<HTMLDivElement>()
  const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
  const loading = ref(false)
  const visible = ref(false)
  const form = reactive({
    knowledgeId: null,
    title: '',
    content: '',
    version: null,
    viewNum: null,
  })

  const workOrderLog = ref({
    logId: null,
    workOrderId: null,
    title: '',
    duration: 0,
    content: '',
  })
  const knowledges = ref([])
  const showKnowledgeDtail = ref(false)

  const closeDialog = ()=>{
    showDetail.value = false
    workOrderLogs.value = []
    showWorkOrderLog.value = false
  }

  const clickKnowledge = async (knowledge) => {
    console.log('clickKnowledge...')
    let id = knowledge.knowledgeId;
    const [err, res] = await to(getKnowledge(id))
    if (res) {
      knowledge = res.data
      knowledgeSelected.value = knowledge
      form.knowledgeId = knowledge.knowledgeId
      form.title = knowledge.title
      form.content = knowledge.content
      form.viewNum = knowledge.viewNum
      form.version = knowledge.version
    }
  }
  const inputChange = (knowledge) => {
    console.log('keyword:', keywords.value);
    let params = {
      title: keywords.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    }
    searchKnowledge(params);
  }
  const scroll = (scrollTop) => {
    value.value = scrollTop

    console.log('max:', max.value, 'scrollTop:', scrollTop.scrollTop)
    let too = max.value - scrollTop.scrollTop

    if (too <= toButtom.value && !loading.value) {
      let pageNum = pageNum.value + 1;
      let sum = pageNum * pageSize.value;
      if (sum >= total.value) {
        return
      }
      loading.value = true
      console.log('search...')
      let params = {
        title: keywords.value,
        pageNum: pageNum,
        pageSize: pageSize.value,
      }
      searchKnowledge(params);
    }
  }

  const searchKnowledge = async (params) => {
    const [err, res] = await to(knowledgeList(params))
    if (res) {
      console.log('search:', res)
      let rows = res.rows
      if (rows) {
        rows.forEach(knowledge => {
          let createTime = knowledge.createTime
          knowledge.createTimeFormat = timeFormat(createTime, 'YYYY-MM-DD')
        })
      }
      knowledges.value = rows
      total.value = res.total
    }
  }
  const clickKnowledgDetail = (knowledg) => {
    showKnowledgeDtail.value = true
    clickKnowledge(knowledg)
  }
  const backToKnowledgeList = () => {
    showKnowledgeDtail.value = false
    currentWorkOrderLog.value = null
  }

  const projectData = ref([])

  const applicantData = ref([])
  //设置单元格样式
  const cellStyle = ({row, column, rowIndex, columnIndex}) => {
    if (columnIndex == 0) {
      return {backgroundColor: "#F5F7FA", width: "auto"};
    }
  }
  const activeName = ref(null)
  const changeTab = async (pane, ev) => {
    console.log('activeName:', activeName)
    const [error, res] = await to (getLogInfo(activeName.value))
    if(res){
      console.log('res:', res)
      workOrderLog.value = res.data
    }

    // currentWorkOrderLog.value = null;
  }
  const startWorkOrderLog = async (log) => {
    let params = {
      logId: activeName.value,
      logStatus: 1
    }
    const [error, res] = await to(logStatus(params))
    if (res) {
      if (res.code == 200) {
        log.logStatus = 1
      }
    }
  }

  const pauseWorkOrderLog = async (log) => {
    let params = {
      logId: activeName.value,
      logStatus: 2
    }
    const [error, res] = await to(logStatus(params))
    if (res) {
      if (res.code == 200) {
        const [infoError, infoRes] = await to (getLogInfo(activeName.value))
        if (infoRes) {
          console.log('infoRes:', infoRes)
          let data = infoRes.data
          log.logStatus = data.logStatus
          log.duration = data.duration
        }
      }
    }
  }
  const complateLog = async (log) => {
    let params = {
      logId: activeName.value,
      logStatus: 3
    }
    const [error, res] = await to(logStatus(params))
    if (res) {
      if (res.code == 200) {
        log.logStatus = 3
      }
    }
  }
  const workOrderLogs = ref([]);
  const showWorkOrderLog = ref(false)
  const currentWorkOrderLog = ref(null)

  const searchLog = async (queryLogParam) => {
    const [error, res] = await to(listLogInfo(queryLogParam))
    if (res) {
      console.log('searchLog:', res)
      let rows = res.rows
      if(rows && rows.length > 0) {
        let firstLog = rows[0]
        if(firstLog){
          activeName.value = firstLog.logId + ''
          workOrderLog.value = firstLog
          console.log('activeName:', activeName.value)
        }
        workOrderLogs.value = rows
      }
    }
  }
  const searchProjectInfo = async ()=>{
    let projectId = currentWorkOrder.value.projectId;
    let [error, res] = await to(getProjectBasicInfo(projectId))
    if (res) {
      console.log('searchProjectInfo:', res)
      projectData.value = res.data.projectData
      applicantData.value = res.data.applicantData
    }
  }

  const moreOperation = (operation) => {
    let data = operation.data
    if (data) {
      currentWorkOrder.value = data
    }
    //type值跟orderStatus值对应
    let type = operation.type
    let workOrderId = data.workOrderId
    let projectId = data.projectId
    let startTime = data.startTime
    let endTime = data.endTime
    if(type == 0) {
      //查询知识库数据
      let params = {
        title: keywords.value,
        pageNum: pageNum.value,
        pageSize: pageSize.value,
      }
      searchKnowledge(params);
      //设置知识库列表滚动条滚动到底部380的时候触发相关逻辑
      max.value = 400
      //查询工单日志列表

      let queryLogParam = {
        workOrderId: workOrderId,
        pageNum: 1,
        pageSize: 100, //默认查询100个工单日志，够用了。
      }
      searchLog(queryLogParam);
      searchProjectInfo();
      showDetail.value = true
    } else {
      //修改工单状态
      let updateWorkOrder = {
        workOrderId: workOrderId,
        projectId: projectId,
        orderStatus: type,
        startTime,
        endTime
      }
      editWorkOrder(updateWorkOrder)
    }
  }

  const editWorkOrder = async (data) => {
    const [error, res] = await to(updateWorkOrder(data))
    search()
  }

  const saveWorkLog = async () => {
    workOrderLog.value.workOrderId = currentWorkOrder.value.workOrderId
    let log = workOrderLog.value
    let title = log.title
    // let duration = log.duration
    if (!title) {
      ElMessage.warning('标题不能为空！');
      return
    }
    // if (!duration) {
    //   ElMessage.warning('时长不能为空！');
    //   return
    // }
    const [error, res] = await to(addLogInfo(log))
    if (error) {
      return
    }
    console.log('save log res:', res)
    workOrderLog.value = {}
    showWorkOrderLog.value = false

    let queryLogParam = {
      workOrderId: currentWorkOrder.value.workOrderId,
      pageNum: 1,
      pageSize: 100, //默认查询100个工单日志，够用了。
    }
    searchLog(queryLogParam)
  }

  const editWorkLog = async () => {
    let log = workOrderLog.value
    let title = log.title
    let duration = log.duration
    if (!title) {
      ElMessage.warning('标题不能为空！');
      return
    }
    if (!duration) {
      ElMessage.warning('时长不能为空！');
      return
    }
    const [error, res] = await to(updateLogInfo(log))
    if (error) {
      return
    }
    console.log('save log res:', res)
    workOrderLog.value = {}
    showWorkOrderLog.value = false

    let queryLogParam = {
      workOrderId: currentWorkOrder.value.workOrderId,
      pageNum: 1,
      pageSize: 100, //默认查询100个工单日志，够用了。
    }
    searchLog(queryLogParam)
  }

  const createWorkOrderLog = () => {
    showWorkOrderLog.value = true
    currentWorkOrderLog.value = null
    workOrderLog.value = {}
  }
  const editWorkOrderLog = () => {
    showWorkOrderLog.value = true
    currentWorkOrderLog.value = workOrderLog.value
  }
  const backToWorkOrderLog = () => {
    showWorkOrderLog.value = false
    workOrderLog.value = {}

    let queryLogParam = {
      workOrderId: currentWorkOrder.value.workOrderId,
      pageNum: 1,
      pageSize: 100, //默认查询100个工单日志，够用了。
    }
    searchLog(queryLogParam)
  }

  const onUploadImg = async (files, callback) => {
    const res = await Promise.all(
      files.map((file) => {
        return new Promise((rev, rej) => {
          const form = new FormData();
          form.append('file', file);
          axios
            .post(prefix + '/file/upload', form, {
              headers: {
                'Content-Type': 'multipart/form-data',
                Authorization: 'Bearer ' + getToken()
              }
            })
            .then((res) => rev(res))
            .catch((error) => rej(error));
        });
      })
    );

    // 方式一
    callback(res.map((item) => 'http://' + window.location.host + ':10002' + ':10002' + item.data.data.url));
    console.log('onUploadImg res:', res)
  };

</script>
<template>
  <div class="default-main page">
    <PageSearch
      v-show="showPageSearch"
      ref="pageSearchRef"
      :pageName="pageName"
      :searchConfig="searchConfigComputed">

      <template #projectIdCustom="{ backData }">
        <div class="marketer-container">
          <el-input type="primary" @click="clickSelectProject(true)" placeholder="搜索项目"
                    :model-value="backData.formData.projectName"></el-input>
        </div>
      </template>

      <template #marketerIdCustom="{ backData }">
        <div class="marketer-container">
          <el-input type="primary" @click="clickSelectUser(true)" placeholder="搜索销售"
                    :model-value="backData.formData.marketerName"></el-input>
        </div>
      </template>

      <template #footer>
        <el-button
          type="primary"
          icon="Search"
          @click="search"
          :loading="searchLoading"
        >检索
        </el-button>
        <el-button @click="reset" icon="Refresh" :loading="searchLoading">
          重置
        </el-button>
      </template>
    </PageSearch>

    <PageContent
      ref="pageContentRef"
      :pageName="pageName"
      :contentConfig="contentConfigComputed"
      :descConfig="descConfig"
      :showPageSearch="showPageSearch"
      :dictMap="dictMap"
      :tableListener="tableListener"
      :tableSelected="tableSelected"
      :permission="permission"
      :requestBaseUrl="requestBaseUrl"
      @beforeSend="beforeSend"
      @addClick="addClick"
      @editBtnClick="editBtnClick"
      @onChangeShowColumn="onChangeShowColumn"
      @triggerShowSearch="triggerShowSearch"
      @editMoreClick="editMoreClick"
    >
      <template #environmentSlot="{ backData }">
        <dict-tag :options="environment" :value="backData.environment"/>
      </template>
      <template #supportMethodSlot="{ backData }">
        <dict-tag :options="support_method" :value="backData.supportMethod"/>
      </template>
      <template #orderStatusSlot="{ backData }">
        <dict-tag :options="work_order_status" :value="backData.orderStatus"/>
      </template>
      <template #supportDateSlot="{ backData }">
        <span>{{backData.startTime + '~' + backData.endTime}}</span>
      </template>
      <template #supportsSlot="{ backData }">
        <el-tag v-for="support in backData.supports">{{support.supportPersonName}}</el-tag>
      </template>
      <template #todoSlot="{ backData }">
        <div class="ml12 order11">
          <el-dropdown :hide-on-click="false" @command="moreOperation">
            <el-button type="warning" size="small">
              <SvgIcon :size="10" iconClass="table"></SvgIcon>
              <span class="ml6">更多</span>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="{'type': 0, data: backData}">详情</el-dropdown-item>
                <el-dropdown-item :disabled="!(backData.orderStatus == 0)" :command="{'type': 1, data: backData}">分配
                </el-dropdown-item>
                <el-dropdown-item :disabled="!((backData.orderStatus == 1) || backData.orderStatus == 3)" :command="{'type': 2, data: backData}">开始
                </el-dropdown-item>
                <el-dropdown-item :disabled="!(backData.orderStatus == 2)" :command="{'type': 4, data: backData}">完成
                </el-dropdown-item>
                <el-dropdown-item :disabled="!(backData.orderStatus == 2)" :command="{'type': 3, data: backData}">暂停
                </el-dropdown-item>
                <el-dropdown-item :disabled="!(backData.orderStatus == 0)" :command="{'type': 5, data: backData}">撤销
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
    </PageContent>
    <PageDialog
      ref="dialogRef"
      :width="dialogWidth"
      :pageName="pageName"
      :dialogConfig="dialogConfigComputed"
      :infoInit="infoInit"
      :search="search"
      :isEditMore="isEditMore"
      :requestBaseUrl="requestBaseUrl"
      @editNext="editNext"
    >
      <template #projectNameCustom="{ backData }">
        <div class="marketer-container">
          <div class="marketer-name">{{backData.formData.projectName ? backData.formData.projectName: '无'}}</div>
          <el-button type="primary" @click="clickSelectProject(false)">请选择</el-button>
        </div>
      </template>
      <template #marketerNameCustom="{ backData }">
        <div class="marketer-container">
          <div class="marketer-name">{{backData.formData.marketerName ? backData.formData.marketerName: '无'}}</div>
          <el-button type="primary" @click="clickSelectUser(false)">请选择</el-button>
        </div>
      </template>

      <template #supportsCustom="{ backData }">
        <div class="marketer-container">
          <el-select-v2
            v-model="values"
            filterable
            :options="supports"
            placeholder="请选择支持人员"
            style="width: 550px;"
            value-key="supportPerson"
            clearable
            multiple
            @change="selectSupport"
            @clear="clearSupport"
          >
            <template #default="{ item }">
              <el-tag>{{ item.label }}</el-tag>
            </template>
            <template #tag>
              <el-tag v-for="i in values">{{i.supportPersonName}}</el-tag>
            </template>
          </el-select-v2>
        </div>
      </template>
    </PageDialog>
    <UserDialog
      v-model="dialogVisible"
      @saveSuccess="allocationMarkter"
    ></UserDialog>
    <ProjectDialog
      v-model="projectDialogVisible"
      @saveSuccess="allocationProject"
    ></ProjectDialog>
    <div>
      <el-dialog v-model="showDetail" :fullscreen="true" :draggable="true" destroy-on-close>
        <div class="close-container">
          <el-icon size="20" @click="closeDialog"><Close /></el-icon>
        </div>
        <div class="detail">
          <div class="detail-left">
            <div class="knowledge-list" v-if="showKnowledgeDtail">
              <div class="knowledge-detail-back" @click="backToKnowledgeList">
                <el-icon>
                  <ArrowLeftBold/>
                </el-icon>
                <span>返回</span>
              </div>
              <!--仅浏览器-->
              <MdPreview class="my-preview" :editorId="knowledgePriviewId.value" :modelValue="form.content"
                         :scrollElement="scrollElement" :showCodeRowNumber="true"/>
            </div>
            <div class="knowledge-list" v-else>
              <div class="search">
                <el-input
                  class="search-input"
                  v-model="keywords"
                  clearable
                  placeholder="搜索知识库"
                  @input="inputChange"
                />
              </div>
              <div class="list">
                <el-scrollbar ref="scrollbarRef" height="690px" always @scroll="scroll">
                  <div class="knowledge-container" ref="innerRef">
                    <div
                      :class="knowledg.knowledgeId == knowledgeSelected.knowledgeId? 'knowledge knowledge-selected' : 'knowledge'"
                      v-for="knowledg in knowledges" :key="knowledg.knowledgeId" @click="clickKnowledge(knowledg)">
                      <div class="knowledge-top">
                        <span class="title" @click.stop="clickKnowledgDetail(knowledg)">{{knowledg.title}}</span>
                      </div>
                      <div class="knowledge-buttom">
                        <div class="knowledge-buttom-item">
                          <el-icon class="knowledge-buttom-item-icon" size="15">
                            <Timer/>
                          </el-icon>
                          <span>{{knowledg.createTimeFormat}}</span>
                        </div>
                        <!--                        <div class="knowledge-buttom-item">-->
                        <!--                          <el-icon class="knowledge-buttom-item-icon" size="15"><View /></el-icon>-->
                        <!--                          <span>{{knowledg.viewNum}}</span>-->
                        <!--                        </div>-->
                        <!--                        <div class="knowledge-buttom-item">-->
                        <!--                          <span class="knowledge-buttom-item-icon">版本:</span>-->
                        <!--                          <span>{{knowledg.version}}</span>-->
                        <!--                        </div>-->
                        <div class="knowledge-buttom-item">
                          <span>{{knowledg.createBy}}</span>
                        </div>
                        <!--                        <div class="detail-button knowledge-buttom-item" @click.stop="clickKnowledgDetail(knowledg)">详情</div>-->
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
                <div v-loading="loading"></div>
              </div>
            </div>
          </div>
          <div class="detail-center">
            <div class="detail-center-top">
              <div class="detail-title">
                <div class="detail-title-basic">
                  <span class="detail-title-prefix">工单</span>
                  <span class="detail-title-middle">/</span>
                  <span class="detail-title-suffix">{{currentWorkOrder.name}}</span>
                </div>
                <dict-tag :options="work_order_status" :value="currentWorkOrder.orderStatus"/>
              </div>
              <div class="detail-desc">
                <div class="detail-desc-left"></div>
                <div class="detail-desc-text">
                  <div class="detail-desc-text-title">描述</div>
                  <el-text class="detail-desc-text-text" truncated>
                    {{currentWorkOrder.desc}}
                  </el-text>
                </div>
              </div>
              <div class="detail-status">
                <div class="knowledge-detail-back" v-if="!showWorkOrderLog">
                  <span class="detail-operation-container-item" @click="createWorkOrderLog">新建问题</span>
                  <span class="detail-operation-container-item" @click="editWorkOrderLog">编辑问题</span>
                </div>
              </div>
              <el-tabs v-model="activeName" class="demo-tabs" @tab-change="changeTab">
                <div v-if="workOrderLogs.length == 0 && !showWorkOrderLog">
                  <el-empty class="q-preview" description="暂无数据"/>
                </div>
                <div v-else>
                  <div v-if="!showWorkOrderLog">
                    <el-tab-pane :label="log.title" :name="log.logId + ''" v-for="log in workOrderLogs">
                      <!--仅浏览器-->
                      <MdPreview class="q-preview" :modelValue="log.content"
                                 :scrollElement="scrollElement" :showCodeRowNumber="true"/>
                      <div class="log-status-container">
                        <div class="log-status">
                          <dict-tag :options="work_order_log_status" :value="log.logStatus"/>
                        </div>
                        <div class="log-operation-container">
                          <div class="total-time">
                            累计时间：{{log.duration}}分钟
                          </div>
                          <div class="log-operation-icon" v-if="log.logStatus == '2' || log.logStatus == '0'">
                            <el-icon size="25"
                                     @click="startWorkOrderLog(log)">
                              <CaretRight/>
                            </el-icon>
                          </div>
                          <div v-if="log.logStatus == '1'">
                            <el-icon size="25" @click="pauseWorkOrderLog(log)">
                              <VideoPause/>
                            </el-icon>
                          </div>
                        </div>
                      </div>
                      <div class="other-operation-container">
                        <el-button :disabled="log.logStatus == '0' || log.logStatus == '3'" type="primary" @click="complateLog(log)">问题完成</el-button>
                      </div>
                    </el-tab-pane>
                  </div>
                  <div v-else="showWorkOrderLog">
                    <div class="log-back">
                      <div class="back" @click="backToWorkOrderLog">
                        <el-icon>
                          <ArrowLeftBold/>
                        </el-icon>
                        <span>返回</span>
                      </div>
                      <div class="save" @click="saveWorkLog" v-if="!currentWorkOrderLog">
                        <span>保存</span>
                      </div>
                      <div class="save" @click="editWorkLog" v-else>
                        <span>更新</span>
                      </div>
                    </div>
                    <el-form :model="workOrderLog" :inline="true">
                      <el-row>
                        <el-col :span="24">
                      <el-form-item label="标题" class="work-order-log-item">
                            <el-input
                              v-model="workOrderLog.title"
                              placeholder="请输入标题"
                            />
                      </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                    <MdEditor class="q-preview" v-model="workOrderLog.content" @onSave="saveWorkLog"
                              @onUploadImg="onUploadImg" :toolbars="toolbars">
                      <template #defToolbars>
                        <ExportPDF :fileName="workOrderLog.content" :modelValue="workOrderLog.content"/>
                      </template>
                    </MdEditor>
                  </div>
                </div>
              </el-tabs>
            </div>
            <div class="detail-center-buttom">
              <el-tag class="detail-center-buttom-item" v-for="support in currentWorkOrder.supports">
                {{support.supportPersonName}}
              </el-tag>
            </div>
          </div>

          <div class="detail-right">
            <div class="project-item">
              <div class="project-title-container">
                <div class="project-title-prefix"></div>
                <span class="project-title">项目信息</span>
              </div>
              <el-table :data="projectData" :show-header="false" :cell-style="cellStyle">
                <el-table-column prop="title" class="table-column"/>
                <el-table-column prop="value"/>
              </el-table>
            </div>
            <div class="project-item">
              <div class="project-title-container">
                <div class="project-title-prefix"></div>
                <span class="project-title">申请人信息</span>
              </div>
              <el-table :data="applicantData" style="width: 100%" :show-header="false" :cell-style="cellStyle">
                <el-table-column prop="title" class="table-column"/>
                <el-table-column prop="value"/>
              </el-table>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped>
  .page {

  :deep(.statusClass .el-radio-group) {
    width: 100%;
    justify-content: space-between;

  .el-radio {
    margin-right: 0;
  }

  }

  :deep(.del) {
    margin-left: 12px;
  }

  .marketer-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .marketer-name {
    width: 150px;
  }

  .el-dropdown {
    z-index: 2000; /* 设定一个较大的 z-index 值 */
  }

  .detail {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
  }

  .detail-left {
    width: 25%;
    height: 530px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 10px;

  }

  .detail-center {
    width: 60%;
    height: 90%;
  }

  .detail-center-top {
    width: 100%;
    border: 1px dashed darkgreen;
    padding: 10px;
    height: auto;
  }

  .detail-center-buttom {
    padding: 5px;
  }

  .detail-center-buttom-item {
    margin-right: 10px;
  }

  .detail-title {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .detail-title-prefix {
    font-weight: bold;
    font-size: 18px;
  }

  .detail-title-middle {
    padding: 8px;
  }

  .detail-title-suffix {
    font-size: 16px;
  }

  .detail-status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    cursor: pointer;
  }
  .detail-desc{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 80px;
    margin: 5px;
  }
  .detail-desc-text{
    background-color: #EDF5FF;
    width: 100%;
    height: 80px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .detail-desc-text-title{
    font-weight: bold;
  }
  .detail-desc-text-text{
    width: 100%;
    margin-top: 10px;
  }
  .detail-desc-left{
    width: 6px;
    background-color: #409EFF;
    height: 80px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .detail-operation-container {
    color: #409eff;
    padding: 5px;
  }

  .detail-operation-container-item {
    padding: 5px;
  }

  .detail-right {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    padding: 10px;
  }

  .project-item {
    width: 90%;
    margin-bottom: 15px;
  }

  .project-title-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .project-title-prefix {
    width: 4px;
    height: 10px;
    background-color: #409eff;
  }

  .project-title {
    font-size: 16px;
    font-weight: bold;
    padding: 5px;
  }

  .knowledge-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .knowledge-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .knowledge-detail-back {
    padding: 2px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color: #409eff;
    width: 100%;
    cursor: pointer;
  }

  .log-back {
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #409eff;
    width: 100%;
    cursor: pointer;
  }

  .back {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .search-input {
    width: 20vw;
    height: 36px;
  }

  .list {
    height: 90%;
    width: 100%;
  }

  .knowledge-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .knowledge {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 5px;
    padding: 5px;
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 10px;
    height: auto;
    cursor: pointer;
  }

  .knowledge-selected {
    border: 1px solid #409eff;
  }

  .knowledge-top {
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    margin-bottom: 5px;

  }

  .detail-button {
    color: #409eff;
    cursor: pointer;
  }

  .knowledge-buttom {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
  }

  .knowledge-buttom-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .knowledge-buttom-item-icon {
    margin-right: 5px;
  }

  .my-preview {
    width: 100%;
    height: 720px;
    border: 1px dashed #409eff;
  }

  .q-preview {
    width: 100%;
    height: 530px;
    position: relative;
  }
  .log-status-container{
    position: absolute;
    top: 5px;
    right: 10px;
  }
  .log-status{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .log-operation-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .log-operation-icon{
    cursor: pointer;
  }
  .other-operation-container{
    position: absolute;
    bottom: 5px;
    right: 10px;
  }
  .total-time{
    margin-right: 5px;
  }

  /deep/ .el-dialog__body {
    padding: 10px;
    width: 100%;
  }

  /deep/ .el-dialog__header {
    display: none;
  }

  .close-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 5px 10px;
  }

  .demo-tabs {
    height: 100%;
    width: 100%;
  }

  .demo-tabs > .el-tabs__content {
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
    width: 100%;
    height: 530px;
  }

  .work-order-log-item{
    width: 100%;
    padding: 3px;
  }
  }


</style>
